<!DOCTYPE html>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<jsp:include page="/pad/common/commonCss.jsp"/>
<jsp:include page="/pad/common/commonJs.jsp"/>
<script  type="text/javascript" src="${basePath}pad/commonJs/tags/My97DatePicker/WdatePicker.js"></script>
<title>嘉童游乐中心</title>
<script type="text/javascript">
		var isContinue=true;
		$(document).ready(function(){
			searchVip();
			$("#vipInfoDl").scroll(function(){  
	    	  if($("#vipInfoDl")[0].scrollTop >= ($("#vipInfoDl")[0].scrollHeight - $("#vipInfoDl").height())){
	    		  if(isContinue==true){
	    			  $("#pageNo").val(parseInt($("#pageNo").val())+1);
		    		  searchVip();		
	    		  }
	    	  }
			});  
		});
		function reSearchVip(){
			$("#vipInfoDl").html("");
			$("#pageNo").val("1");
			searchVip();
		}
		
		function searchVip(){
			$.ajax({
				url:"${basePath}filemanagement/listVipInfo.shtml",
				dateType:"json",
				data:$("#vipInfo").serialize(),
				type:"post",
				error : function(XMLHttpRequest) {
  	 				ajaxError(XMLHttpRequest);
  	 			},
				success:function(result){
					var html="";
					var bgClass="";
					$(result).each(function(id,item){
						  if(item.status==0||item.status==1|| item.status==3 || item.status==4||item.status==5){//红色-问题（过期/黑名单/停卡）
							  bgClass="border_re";
						  }else{
							   if((item.inTime!=null && item.inTime!="") && (item.outTime==null ||item.outTime=="")){//绿色-场内
								   bgClass="border_lv";
							   }else{//灰色-场外
								   bgClass="border_bl";
							   }
						 }
						html+='<dd class="'+bgClass+'" onclick="findVipDetail(this);" memberId="'+item.pkMemId+'"  type="2"  inTime="'+item.inTime+'"  outTime="'+item.outTime+'"  >';
						html+='<img  width="144" height="192"  src="${basePath}common/showImage.shtml?imagePath='+item.imagePath+'"/>';
						html+='<ul class="huiyuangl_ul">';
						html+='<li><span class="f16">'+item.name+'</span><span class="fr">'+item.age+'岁</span></li>';
						html+='<li>会员:<span class="f9">'+item.pkMemId+'</span></li>';
						html+='</ul></dd>';
					});
					$("#vipInfoDl").append(html);
					if(result==null||result.length==0){
						isContinue=false; 
					/* 	$("#vipInfoDl").height($("#vipInfoDl").height()+200); */
					} 
				}
			});
		}
		//查询详情
		function findVipDetail(thisObj){
			var  memberId=$(thisObj).attr("memberId");
			var  type=$(thisObj).attr("type");
			var  inTime=$(thisObj).attr("inTime");
			var  outTime=$(thisObj).attr("outTime");
			window.location.href="${basePath}filemanagement/findDetailInfo.shtml?memberId="+memberId+"&type="+type+" &inTime="+inTime+"&outTime="+outTime+"&hisType=1";
		}
</script>
</head>
<body class="bg">
<div class="i_index">
    <div class="i_index_l fl">
    	<h1><a href="${basePath}system/user/updatePadPass.shtml"><i class="icon iconfont">&#xe60f;</i><br>${user.name}</a></h1>
        <ul>
        	<li><a href="${basePath }system/index.shtml?mode=pad"><i class="icon iconfont">&#xe600;</i><br>首页</a></li>
            <li class="i_index_l_hover"><a href="${basePath}filemanagement/findVipInfo.shtml"><i class="icon iconfont">&#xe603;</i><br>会籍</a></li>
            <li><a href="${basePath}parreserve/reservationPage.shtml"><i class="icon iconfont">&#xe604;</i><br>预约</a></li>
            <li><a href="${basePath }goods/padSales.shtml"><i class="icon iconfont">&#xe602;</i><br>消费管理</a></li>
        </ul>
    </div>
    <div class="i_index_r fl oh">
       	<!----内容-->
        <div class="p20">
        <form id="vipInfo">
        <!-- index页面传入 -->
					<input type="hidden" id="indexBirth" name="indexBirth" value="${indexBirth }">
					<input type="hidden" id="indexEndDate" name="indexEndDate" value="${indexEndDate }">
					<input type="hidden" name="pageSize" id="pageSize"  value="10"/>
					<input type="hidden" name="pageNo" id="pageNo"  value="1"/>
					<input type="hidden" name="queryType" id="queryType"  value="2"/>
					<input type="hidden" name="type"   value="1,3"/>
    	<div class="file_single_dl f14 fixed">
        	<dl style="overflow:hidden" class="fixed">
            	<dd><label>姓名/电话/邮箱：</label><input type="text"  name="condition"   class="iput_t w200"></dd>
                <dd class="fr"><label>会员状态：</label>
                	<div class="uboxstyle">
                        <select name="status" id="status">
                            <option value="">全部</option>
                            <option value="1">未激活</option>
                            <option value="2">有效</option>
                            <option value="3">过期</option>
                            <option value="4">停卡</option>
                        </select>
                    </div>
                </dd>
                <dd><label>会员生日：</label>
                	<input type="text" readonly="readonly" class="Wdate iput_t w82" onclick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})" id="birthdayStartDate" name="birthdayStartDate" title="">
                    <span class="mlr5">至</span>
                    
                	<input type="text" readonly="readonly" class="Wdate iput_t w82" onclick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})" id="birthdayEndDate" name="birthdayEndDate" title="">
                </dd>
                <dd class="fr"><label>入会日期：</label><input type="text" readonly="readonly" class="Wdate iput_t w82" onclick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})" id="joinStartDate" name="joinStartDate" title="">
                    <span class="mlr5">至</span>
                    
                	<input type="text" readonly="readonly" class="Wdate iput_t w82" onclick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})" id="joinEndDate" name="joinEndDate" title=""></dd>
                <dd><label>失效日期：</label><input type="text" readonly="readonly" class="Wdate iput_t w82" onclick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})" id="invalidStartDate" name="invalidStartDate" title="">
                    <span class="mlr5">至</span>
                    
                	<input type="text" readonly="readonly" class="Wdate iput_t w82" onclick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})" id="invalidEndDate" name="invalidEndDate" title=""></dd>
                <dd class="fr"><label>关联销售：</label>
                	<div class="uboxstyle">
                        <select name="pkUsrId" id="pkUsrId">
                          	<c:if test="${fn:length(salesList)>1}">
                          			<option value="">全部</option>
                          	</c:if>
                          	<c:forEach items="${salesList}"  var="item">
                          			 <option value="${item.pkUsrId}">${item.usrName}</option>
                          	</c:forEach>
                        </select>
                    </div>
                </dd>
            </dl>
            	<input type="button" value="搜索"  onclick="reSearchVip();" class="btn fr ml10">
                <input type="button" value="新建" class="btn fr"  onClick="javascript:window.location.href='${basePath}filemanagement/findDetailInfo.shtml?memberId=&type=1'">
        </div>
        </form>
<!--         <div id="outer-div"  style="overflow-y:auto; overflow-x:hidden; width:860px;height:884px;">
 -->       	<div class="huiyuangl fixed mt20" >
       		<dl id="vipInfoDl" style="height:550px;width:883px;overflow-y:auto;" >
            
            </dl>
         <!--  <div id="outer-div" style="overflow-y:auto; overflow-x:hidden; width:800px;height:300px;">  
      		<div style="height:750px;background:#aea;width:600px;margin:0 auto;" id="vipInfoDl">  
				
	  
	  		</div>  
   		 </div>  -->
            
            <!----翻页----->
         <!--    <div class="page fr m10">
                <span>第3/2000页</span>
                <span>首页</span>
                <span>上一页</span>
                <span><a href="#">下一页</a></span>
                <span><a href="#">末页</a></span>
                <span>跳转到<input type="text" class="black_text mlr5">页</span>
                <span class="page_go"><a href="#">go</a></span>
            </div> -->
            <!----翻页----->
        </div>
        <!-- </div> -->
        
        </div>
        <!---内容--->
    </div>
</div>
</body>
</html>